<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="18">
          <el-col :span="3">公司LoGo</el-col>
          <el-col :span="18">电商后台管理系统</el-col>
          <el-col :span="3"><el-button @click="fh">返回</el-button></el-col>
        </el-row></el-header
      >
      <el-container>
        <el-aside :width="collapse ? '50px' : '210px'">
          <div class="top" @click="collapse = !collapse">
            <i class="el-icon-s-fold" v-show="!collapse"></i>
            <i class="el-icon-s-unfold" v-show="collapse"></i>
          </div>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#363c42"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
            <el-submenu
              :index="item.path"
              v-for="(item, index) in menus"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item-group
                v-for="(itemm, indexx) in item.children"
                :key="indexx"
              >
                <el-menu-item :index="'/' + itemm.path">{{
                  itemm.authName
                }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view
        /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      collapse: false,
    };
  },
  created() {
    this.getmenus();
  },
  methods: {
    getmenus() {
      this.$axioss.get("menus").then((res) => {
        console.log(res);
        this.menus = res.data.data;
      });
    },
    fh() {
      sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #363c42;
  color: #333;
  text-align: center;
  line-height: 60px;
  color: white;
}

.el-aside {
  background-color: #363c42;
  color: #333;
  text-align: center;
  color: white;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 100vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
